<template>
  <div class="yxp">
    <div class="yxp-wordList-top">
      <div class="back" id="yxp-after-back" @click="handleBack">
        <span></span>
      </div>
      <span class="yxp-top-c">学后检测</span>
      <div class="yxp-top-r">
        <div class="text">总数<em>{{dataList.length}}</em></div>
        <div class="line"></div>
        <div class="text">错误<em v-if="!isError">{{errorNum}}</em><em v-else>{{errorNum}}</em></div>
        <div class="line"></div>
        <div class="text">正确率<em v-if="!isError">100%</em><em v-else>{{(successNum / dataList.length * 100).toFixed(2) + '%'}}</em></div>
        <div class="btn" id="yxp-after-submit" @click="handleSubmit">提交</div>
      </div>
    </div>
      <Timetips ref="timetips"></Timetips>
    <Study :data="dataList" @check="handleCheckResult"/>
    <div class="mark" v-if="isPop"></div>
    <div class="yxp-wordList-pop" v-if="isPop">
      <div class="close" id="yxp-after-close" @click="handleReset"></div>
      <p class="tips">是否放弃检测</p>
      <div class="btn">
        <span class="btn-item" id="yxp-after-sure" @click="handleSure">确定</span>
        <span class="btn-item" id="yxp-after-reset" @click="handleReset">取消</span>
      </div>
    </div>
  </div>
</template>
<script>
import storage from '@/utils/storage.js'
import Study from '@/components/Study.vue'
import Timetips from "@/components/Timetips";
import { distinguiShword, middleStop ,doubleminusdistinguiShword} from '@/services/word.js'
export default {
  name: 'afterStudy',
  components: {
    Study,
    Timetips
  },
  data() {
    return {
      package_id: 0,
      successNum: 0,
      errorNum: 0,
      tips: '',
      isPop: false,
      canArr: [],
      canNotArr: [],
      dataList: [],
      isError: false,
      course_type: 0,
      is_doubleminus:sessionStorage.getItem('doubleminus_type')
    }
  },
  destroyed () {
    delete window.__LIMIT_TIME__
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  created () {
    window.__LIMIT_TIME__ = -1
    this.package_id = this.$route.query.package_id
    this.course_type = this.$route.query.course_type
    let data = storage.get('paperData')
    let arr = []
    data.map(item => {
      if (item.isEnd) {
        item.data.map(elem => {
          arr.push(elem)
        })
      }
    })
    arr.map(item => {
      item.num = 0
      item.isSuccess = false
      item.isError = false
    })
    this.dataList = arr
    this.successNum = this.dataList.length
  },
  methods: {
    handleCheckResult (val) {
      this.isError = true
      if (val.type === 1) {
        if (this.canArr.indexOf(val.id) === -1) {
          this.canArr.push(val.id)
        }
        if (this.canNotArr.indexOf(val.id) > -1) {
          this.errorNum--
          this.successNum = this.dataList.length - this.errorNum
          let index = this.canNotArr.indexOf(val.id)
          this.canNotArr.splice(index, 1)
        }
      } else if (val.type === 0) {
        this.errorNum++
        this.successNum = this.dataList.length - this.errorNum
        if (this.errorNum > this.dataList.length) this.errorNum = this.dataList.length
        this.successNum = this.dataList.length - this.errorNum
        if (this.canNotArr.indexOf(val.id) === -1) {
          this.canNotArr.push(val.id)
        }
        if (this.canArr.indexOf(val.id) > -1) {
          let index = this.canArr.indexOf(val.id)
          this.canArr.splice(index, 1)
        }
      }
    },
    handleSubmit () {
      if (this.canArr.length + this.canNotArr.length < this.dataList.length) {
        this.$toast('单词还没有检测完，不能提交哦~')
        return
      }
      let params = {
        can: this.canArr.join(','),
        can_not: this.canNotArr.join(','),
        type: 'init',
        package_id: this.package_id,
        times: 2,
        f_type: 1
      }
      this.$loading.show()
      if(this.is_doubleminus != 1){
        doubleminusdistinguiShword(params).then(res => {
          if (res.code === 1) {
            this.$loading.hide()
            if (res.data.is_finish === 1) {
              if(res.data.complete > 3){
                this.$router.push({
                  path: '/wordRemember/wordReport',
                  query: {
                    id: res.data.resid,
                    is_finish:res.data.is_finish,
                    type:1,
                    content:res.data.content
                  }
                })
              }else{
                this.$router.push({
                  path: '/wordRemember/wordGrade',
                  query: {
                    path: window.encodeURIComponent(res.data.url),
                    package_id: this.package_id,
                    is_finish:res.data.is_finish,
                    title: this.$route.query.title
                  }
                })
              }
            }else{
              this.$router.push({
                path: '/wordRemember/wordReport',
                query: {
                  id: res.data.resid,
                  is_finish:res.data.is_finish,
					type:1,
					content:res.data.content
                }
              })
            }
          } else {
            this.$loading.hide()
          }
        })
      }else {
        distinguiShword(params).then(res => {
          if (res.code === 1) {
            this.$loading.hide()
			if (res.data.is_finish === 1) {
				if(res.data.complete > 3){
					this.$router.push({
						path: '/wordRemember/wordReport',
						query: {
							id: res.data.resid,
							is_finish:res.data.is_finish,
							type:1,
							content:res.data.content
						}
					})
				}else{
					this.$router.push({
						path: '/wordRemember/wordGrade',
						query: {
							path: window.encodeURIComponent(res.data.url),
							package_id: this.package_id,
							is_finish:res.data.is_finish,
							title: this.$route.query.title
						}
					})
				}
			}else{
				this.$router.push({
					path: '/wordRemember/wordReport',
					query: {
						id: res.data.resid,
						is_finish:res.data.is_finish,
						type:0,
						content:res.data.content
					}
				})
			}
    //         this.$router.push({
    //           path: '/wordRemember/wordReport',
    //           query: {
    //             id: res.data.resid,
				// is_finish:res.data.is_finish,
				// type:1,
				// content:res.data.content
    //           }
    //         })
          } else {
            this.$loading.hide()
          }
        })
      }
    },
    async handleSure () {
      this.isPop = false
      if (this.course_type === 1) {
		this.$router.replace({
			path: '/wordRemember'
		})
        // console.log(66666)
        // this.$loading.show()
        // let data = await middleStop({ id: this.package_id, question_type: '0'})
        // if (data.code === 1) {
        //   this.$loading.hide()
        //   console.log(1222)
        //   this.$router.replace({
        //     path: '/wordRemember'
        //   })
        // } else if (data.code === '10001') {
        //   this.$toast('token失效，请重新登录')
        //   this.$router.replace({
        //     path: '/'
        //   })
        // }else {
        //   this.$loading.hide()
        //   this.$toast(data.info)
        // }
      } else {
        this.$router.replace({
          path: '/wordRemember'
        })
      }
    },
    handleReset () {
      this.isPop = false
    },
    handleBack () {
      this.isPop = true
    }
  }
}
</script>
<style lang="less" scoped>
.yxp-wordList-top {
  .yxp-top-r {
    .text {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      margin-left: 9px;
      margin-right: 9px;
      &:first-child {
        margin-left: 0;
      }
      em {
        margin-left: 10px;
      }
    }
    .line {
      width: 1px;
      height: 16px;
      background: #D6D6D6;
    }
    .btn {
      width: 140px;
      height: 46px;
      line-height: 46px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background:linear-gradient(360deg,rgba(71,203,179,1) 0%,rgba(81,211,176,1) 100%);
      box-shadow:0px 5px 10px rgba(59,201,164,0.3);
      border-radius: 30px;
      cursor: pointer;
      &:hover {
        background:linear-gradient(360deg,rgba(39,178,152,1) 0%,rgba(52,203,163,1) 100%);
        box-shadow:0px 5px 10px rgba(59,201,164,0.3);
      }
    }
  }
}

.yxp-wordList-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 360px;
  height: 270px;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  .close {
      position: absolute;
      right: 20px;
      top: 15px;
      width: 20px;
      height: 20px;
      background: url(../../../assets/word/close-icon.png) no-repeat;
      background-size: 20px 20px;
      cursor: pointer;
      &:hover {
        background-image: url(../../../assets/word/close-hover.png);
      }
    }
  .tips {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    padding-top: 96px;
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 53px;
    .btn-item {
      width: 130px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background: #27BFA3;
      border-radius: 100px;
      cursor: pointer;
      &:first-child {
        margin-right: 20px;
      }
      &:hover {
        background: #18A38A;
      }
    }
  }
}
</style>
